<template>
    <div class="slider">
        <div class="main-slide">
            <img :src="currentSlide.image" :alt="currentSlide.caption" />
            <p>{{ currentSlide.caption }}</p>
        <section class="cut-btn cut-btn-left" @click="previousSlide">
          <div class="infont-icon"></div>
        </section>
            <section class="cut-btn-wrap">
        <section class="cut-btn cut-btn-right" @click="nextSlide">
          <div class="infont-icon"></div>
        </section>
      </section>
        </div>
        <div class="thumbnail-slider" ref="thumbnailSlider">
            <div v-for="(slide, index) in slides" :key="index" @click="goToSlide(index)" class="thumbnail"
                :class="{ active: index === currentIndex }">
                <img :src="slide.image" :alt="slide.caption" />
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs, onMounted, onUpdated, onBeforeUnmount, computed } from 'vue';
const props = defineProps({
  bgHeight: {
    type: [String || Number],
    default: "",
  },
  bgColor: {
    type: String,
    default: "#fff",
  },
  morenSrc: {
    type: String,
    default: "",
  },
  sildeList: {
    type: Array as () => Array<Record<string, any>>,
    default: () => [],
  },
  show: {
    type: Number,
    default: 4,
  },
  autoPlay: {
    type: Boolean,
    default: false,
  },
});
const { bgHeight, bgColor, show, morenSrc, sildeList } = toRefs(props);
interface Slide {
    image: string;
    caption: string;
}

export default defineComponent({
    name: 'SlideShow',
    setup() {
        const state = reactive({
            currentIndex: 0,
            slides: [
                {
                    image: 'https://img.cctvch.cn/uploads/202306/1313/6488040b33a37505982.jpg',
                    caption: 'Slide 1 Caption',
                },
                {
                    image: 'https://img.cctvch.cn/uploads/202306/1313/648804868cfb9511903.jpg',
                    caption: 'Slide 2 Caption',
                },
                {
                    image: 'https://img.cctvch.cn/uploads/202306/1313/648804898554e468822.jpg',
                    caption: 'Slide 3 Caption',
                },
            ],
            thumbnailIndex: 0,
        });

        const currentSlide = computed(() => state.slides[state.currentIndex]);

        const goToSlide = (index: number) => {
            state.currentIndex = index;
            updateThumbnailPosition();
        };

        const previousSlide = () => {
            if (state.currentIndex > 0) {
                state.currentIndex--;
                updateThumbnailPosition();
            }
        };

        const nextSlide = () => {
            if (state.currentIndex < state.slides.length - 1) {
                state.currentIndex++;
                updateThumbnailPosition();
            }
        };

        const updateThumbnailPosition = () => {
            const thumbnailSlider = document.querySelector('.thumbnail-slider');
            const thumbnails = document.querySelectorAll('.thumbnail');
            if (thumbnailSlider instanceof HTMLElement && thumbnails.length) {
                const thumbnailWidth = thumbnails[0].getBoundingClientRect().width + 10; // Including margin
                thumbnailSlider.scrollTo({
                    left: thumbnailWidth * state.currentIndex,
                    behavior: 'smooth',
                });
            }
        };

        onMounted(() => {
            updateThumbnailPosition();
        });

        onUpdated(() => {
            updateThumbnailPosition();
        });

        onBeforeUnmount(() => {
            // Clean-up
        });

        return {
            ...toRefs(state),
            currentSlide,
            goToSlide,
            previousSlide,
            nextSlide,
        };
    },
});
</script>
  
<style scoped="">
.slider {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.main-slide {
    position: relative;
    width: 700px;
    max-height: 400px;
    overflow: hidden;
}

.main-slide button{
    background-color: bisque;
    width: 50px;
    height: 50px;
}
.main-slide img {
    width: 100%;
    height: auto;
}

.thumbnail-slider {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.thumbnail {
    margin: 0 5px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s;
    width: 200px;
    overflow: hidden;
}

.thumbnail img {
    width: 100%;
}

.thumbnail:hover,
.thumbnail.active {
    opacity: 1;
}

.cut-btn {
  position: relative;
  width: 52px;
  height: 52px;
  font-size: 0;
  border: 1px solid #9195a3;
  border-radius: 12px;
  cursor: pointer;
  overflow: hidden;
}

.infont-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 0px;
  transform: translate(-50%, -50%);
}

.infont-icon::before {
  content: "";
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  height: 0;
  width: 0;
  transition: all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.infont-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0px;
  height: 2px;
  background: #9195a3;
  display: inline-block;
  transform: translateY(-50%);
  transition: all 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.cut-btn-left .infont-icon::before {
  margin-left: -4px;
  border-right: 6px solid #9195a3;
}

.cut-btn-right .infont-icon::before {
  border-left: 6px solid #9195a3;
}

</style>